<template>
  <view class="tail-page">
    <block v-for="(item,index) in thailList" :key="index">
      <view class="list text-center" @click="toSee(item.thaliId)">
        <view class="pay-time">
          <span class="num-one">购买时间：{{item.createTime}}</span>
        </view>
        <view class="item grid col-3">
          <view class="item-one">
            <image class="image" src="/static/images/zhouka.png" alt=""></image>
          </view>
          <view class="item-two">
            <span class="tail-math" itemprop="" v-if="item.couponType==1">{{item.sale}}</span>
            <span class="tail-math" itemprop="" v-if="item.couponType==2">{{item.minMoney}}</span>
            <span class="tail-status" v-if="item.couponType==1">折</span>
            <span class="tail-status" v-if="item.couponType==2">元</span>
            <span>x</span>
            <span class="order-number">{{item.couponNum}}</span>
            <span class="zhang">张</span>
          </view>
          <view class="item-three">
            <div class="tail-price-status">￥<b class="price">{{ item.price }}</b></div>
            <div class="max-price">最高省<span class="tail-price-status">{{item.maxMoney}}</span>元</div>
          </view>

        </view>
      </view>
    </block>

  </view>
</template>
<script>

import { getMyPayList } from '@/api/durian/thail/thail.js'

export default {
  data() {
    return {
      thailList: []
    };
  },
  onLoad() {
    this.getThailList();
  },
  methods: {
    getThailList() {
      getMyPayList().then(res=>{
        this.thailList=res.rows;
      })
    },
    toSee(id){
      this.$tab.reLaunch('/pages/mine/tail/pay?id='+JSON.stringify(id))
    }
  }


}
</script>

<style>
.num-one{
  height: 30px;
  display: block;
  margin-left: 12px;
  margin-top: 7px;
}
.pay-time{
  display: flex;
  width: 360px;
  height: 30px;
  background-color: white;
  margin-left: auto;
  margin-right: auto;
  margin-top: 10px;
  border-radius: 20px 20px 0px 0px;
}
.image{
  width: 100px;
  height: 90px;
  border-radius: 20px;
}
.item {
  display: flex;
  width: 360px;
  height: 13vh;
  background-color: white;
  border-radius: 0px 0px 20px 20px;
  margin-left: auto;
  margin-right: auto;
}
.item-one{
  height: 15vh;
  margin-top: 2px;
  margin-bottom: auto;
  margin-left: auto;
  margin-right: auto;
  padding-top: 5px;
}
.item-two{
  background-color: #f9f5f0;
  display: flex;
  align-items: center;
  justify-content: center;
  //position: relative;
  //top: 10%;
  //left: 50%;;
  height: 60px;
  border-radius: 10px;
  margin-top: 20px;
  margin-bottom: auto;
  margin-left: auto;
  margin-right: auto;
  color: sandybrown;
}
.tail-math{
  font-size: 20px;
}
.tail-status{
  font-size: 13px;
  margin-right: 5px;
}
.order-number{
  font-size: 20px;
  margin-left: 5px;
}
.item-three{
  height: 15vh;
  margin-top: 20px;
  margin-bottom: auto;
  margin-left: auto;
  margin-right: auto;
}
.tail-price-status{
  color: red;
}
.price{
  font-size: 22px;
}
.max-price{
  margin-top: 10px;
  font-size: 10px;
}
.pay-button{
  display: flex;
  align-items: center;
  justify-content: center;
  margin-top: 10px;
  width: 70px;
  height: 25px;
  background-color: indianred;
  color: white;
  border-radius: 30px;
  font-size: 12px;
}
</style>